import React from 'react'
import { connect } from 'dva';
import {
    Menu, Dropdown, Tag
} from 'antd';
import { styleToText } from '../../../../utils/http';
import { updateInfoStyle } from '../../../../services/information';

@connect(({ add, video }) => ({
    add: add,
    video: video
}))
export default class StyleDropdown extends React.PureComponent {

    constructor(props) {
        super(props);
        this.state = {
            styleList: [
                {
                    "template_name": "默认",
                    "template_conf": {
                        "limit": "10",
                        "style": ""
                    }
                },
                {
                    "template_name": "左图样式",
                    "template_conf": {
                        "limit": "10",
                        "style": "news_list"
                    }
                },
                {
                    "template_name": "右图样式",
                    "template_conf": {
                        "limit": "10",
                        "style": "news_right_img"
                    }
                },
                {
                    "template_name": "大图样式",
                    "template_conf": {
                        "limit": "10",
                        "style": "news_big_img"
                    }
                },
                {
                    "template_name": "卡片样式",
                    "template_conf": {
                        "limit": "10",
                        "style": "news_card"
                    }
                },
                {
                    "template_name": "领导人分类",
                    "template_conf": {
                        "limit": "10",
                        "style": "leader_classify"
                    }
                },
            ]
        }
    }

    hanldClick = (item) => {
        let obj = {
            "plate_information_id": this.props.data.plate_information_id,
            "style": item.template_conf.style
        }
        updateInfoStyle(obj).then((res) => {
            if (res.data.code == 200) {
                this.props.dispatch({
                    type: 'video/getTableList', payload: {
                        dataAugment: {
                            index: this.props.video.dataAugment ? this.props.video.dataAugment.index : 1,
                            plate_id: this.props.video.dataAugment.plate_id
                        }
                    }
                })
            }
        })
    }


    render() {

        const { text } = this.props;

        //增加了一个判断，不然要报错，有需要请注释掉
        // const style = this.props.video.plateTemplate ? this.props.video.plateTemplate.template_conf.style : '';
        const style = this.props.video.plateTemplate&&this.props.video.plateTemplate.template_conf ? this.props.video.plateTemplate.template_conf.style : '';
        const menu = (
            <Menu>
                {this.state.styleList.map((item) => {
                    return (
                        <Menu.Item key={item.template_name}>
                            <span onClick={() => {
                                this.hanldClick(item)
                            }}>{item.template_name}</span>
                        </Menu.Item>
                    )
                })}
            </Menu>
        );

        let drop = (
            <Dropdown overlay={menu}>
                <Tag color="red" >{styleToText(text)}</Tag>
            </Dropdown>
        )
        //banner和服务类型不能改变单个文章样式
        if (style == "news_banner" || style == 'news_express' || style == 'news_service' || style == 'news_banner2' || style == 'jx_banner') {
            drop = <Tag color="red" >{styleToText(text)}</Tag>
        }
        return (
            drop
        )
    }
}